<template>
<div id="QD_Mine">
  <div style="height: 3.6rem; position: relative; overflow: hidden;">
    <img src="@/assets/img/main/bg.jpg" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0;">
    <div style="width: 1.6rem; height: 1.6rem; margin: 0.6rem auto 0; position: relative; background: #FFFFFF; border-radius: 50%;">
      <img :src="'./logo.png'" style="width: 100%; height: 100%;">      
    </div>
    <div style="text-align: center; font-size: 0.36rem; margin-top: 0.3rem; color: #FFFFFF; position: relative;">电小童</div>
  </div>
  <div style="height: 0.2rem; background: #f7f7f7;"></div>
  <div class="main-title">
    <div class="main-title-icon"></div>
    <div class="main-title-text">金额管理</div>
  </div>
  <div style="height: 3.8rem; display: flex; flex-direction: column; justify-content: space-around; align-items: center;">
    <div style="font-size: 1rem; color: #f6712e;">{{ totalRevenue }}</div>
    <div style="font-size: 0.24rem; color: #2C3E50;">总流水(元)</div>
    <div class="flex-bottom-box">
      <div class="flex-bottom-item" v-for="item in liushui" :key="item.key">
        <div class="flex-bottom-top">{{ item.value }}</div>
        <div class="flex-bottom-bottom">{{ item.name }}</div>
      </div>
    </div>
  </div>
  <div style="height: 0.2rem; background: #f7f7f7;"></div>
  <div class="main-title">
    <div class="main-title-icon"></div>
    <div class="main-title-text">应用功能</div>
  </div>
  <div class="func-box">
    <div class="func-item" v-for="item in funcList" :key="item.key" @click="funcItem( item.key )">
      <img class="func-img" :src="`./static/img/${item.icon}.png`">
      <div class="func-name">{{ item.name }}</div>
    </div>
  </div>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';
declare const wx: any;

@Component
export default class app extends Vue {

  totalRevenue: number = 0

  liushui: any = [
    { name: '已提现金额(元)', value: 0, key: 'haveWithdrawalAmount' },
    { name: '待审核金额(元)', value: 0, key: 'amountToBeAudited' },
    { name: '可提现金额(元)', value: 0, key: 'cashWithdrawalAmount' }
  ]

  funcList: any = [

    { name: '申请提现', icon: 'f1', key: 'tx-shengqing', role: [ 4 ] },
    { name: '提现记录', icon: 'f3', key: 'tx-jilu', role: [ 4 ] },
    { name: '修改密码', icon: 'f4', key: 'mima', role: [ 4 ] },

    { name: '认证信息', icon: 'f13', key: 'RzInfo', role: [ 4 ] },

    { name: '退出登录', icon: 'f14', key: 'tuichu', role: [ 4 ] }

  ]

  funcItem(key: any) {
    switch(key) {
      case 'tx-shengqing':
        this.$router.push('TxSq');
      break;
      case 'tx-shengpi':
        this.$router.push('TxSp');
      break;
      case 'tx-jilu':
        this.$router.push('TxJl');
      break;
      case 'mima':
        this.$router.push('ResetPass');
      break;
      case 'mendian':
        this.$router.push('AddMendian');
      break;
      case 'teshu':
        this.$router.push('AddSup');
      break;
      case 'shanghu':
        this.$router.push('ShopList');
      break;
      case 'yewuyuan':
        this.$router.push('YewuList');
      break;
      case 'yewuyuanYJ':
        this.$router.push('yewuyuanYJ');
      break;
      case 'daili':
        this.$router.push('DailiList');
      break;
      case 'liuyan':
        this.$router.push('Liuyan');
      break;
      case 'RzInfo':
        this.$router.push('RzInfo');
      break;
      case 'tuichu': 
        axios.post('/api/login/wxWebLogout').then((res: any) => this.$store.commit('exit'));
      break;
      case 'Churu': 
        this.$router.push('ChuruList');
      break;
      case 'MendianType': 
        this.$router.push('MendianType');
      break;
      case 'QuShi': 
        this.$router.push('QuShi');
      break;
      case 'Beijian': 
        this.$router.push('Beijian');
      break;
    }
  }


  created() {
    let roleType = this.$store.state.userInfo.roleType;
    let funcList = this.funcList.filter((item: any) => item.role.indexOf( roleType ) > -1);
    this.funcList = funcList.filter((item: any) => { if( item.key == 'tx-shengqing' ) { return this.$store.state.userInfo.role.withdraw == 0; } else return true; });
    axios.get('/api/orderFormController/getUserByMoneyManage',{
      userId: this.$store.state.userInfo.userId
    }).then((res: any) => {
      this.liushui.forEach((ele: any) => ele.value = res[ ele.key ] || 0);
      this.totalRevenue = res.totalRevenue || 0;
    })
  }
  
};
</script>

<style lang="scss">
#QD_Mine {
  .main-title { 
    height: 0.6rem; 
    display: flex; 
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    .main-title-icon {
      width: 0.06rem;
      height: 0.3rem;
      background: #18a3dc;
      margin-left: 0.4rem;
    }
    .main-title-text {
      font-size: 0.3rem;
      color: #4d4d4d;
      margin-left: 0.3rem;
    }
  }
  .flex-bottom-box {
    width: 100%; 
    height: 0.84rem; 
    display: flex; 
    flex-direction: row;
    .flex-bottom-item {
      width: 33%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .flex-bottom-top {
        font-size: 0.36rem;
        color: #18a3dc;
      }
      .flex-bottom-bottom {
        font-size: 0.24rem;
        color: #666666;
      }
    }
  }
  .func-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 0.2rem;
    .func-item {
      width: 25%;
      height: 1.6rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .func-img {
        height: 0.46rem;
        margin-bottom: -0.1rem;
      }
      .func-name {
        font-size: 0.24rem;
        color: #4d4d4d;
        margin-top: -0.1rem;
      }
    }
  }
}
</style>

